<template>
  <div class="w_full h_full flex">
    <div class="g_left">
      <div class="gl_header flexbetween aligncenter plr-16">
        <el-form ref="form" :model="queryParams1" size="small">
          <el-form-item label="" prop="keyword" class="mb-0">
            <el-input
              placeholder="请输入关键词"
              v-model="queryParams1.keyword"
              @keyup.enter.native="handleQuery"
              class="x-input-select"
            >
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="">
        <div class="h_title fw-6 c_text2 p-12 pb-0">转播人(在主讲群内)</div>
        <div class="listbody p-12">
          <div class="list-item flex aligncenter mb-4">
            <img
              src="https://wework.qpic.cn/wwpic/576270_jL0ikDqEQ1SA2FC_1697685555/0"
              class="avatar mr-8"
              alt=""
            />
            <span class="list-title textover">xxxxx</span>
          </div>
        </div>
      </div>
    </div>
    <div class="g_right">
      <div class="gl_header flexbetween aligncenter pl-8">
        <el-form ref="form" :model="queryParams" size="small" inline>
          <el-form-item label="" prop="keyword" class="mb-0">
            <el-input
              placeholder="关键词搜索"
              v-model="queryParams.keyword"
              @keyup.enter.native="handleQuery"
              class="x-input-select"
              style="width: 120px"
            >
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="" prop="ismaster" class="mb-0">
            <el-select
              v-model="queryParams.ismaster"
              placeholder="是否群主/管理员"
              style="width: 110px"
            >
              <el-option label="是" :value="1" />
              <el-option label="否" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="" class="mb-0">
            <MultipleSelect
              placeholder="群标签"
              :receiverNameOpt="lableOpt"
              width="120px"
              :hasNoLable='true'
              :isSelect='false'
            >
              <div slot="header" class="mselectheader">
                <el-radio-group v-model="queryParams.radio">
                  <el-radio :label="1">满足任意一个选中标签</el-radio>
                  <el-radio :label="2">同时满足所有选中标签</el-radio>
                </el-radio-group>
              </div>
            </MultipleSelect>
          </el-form-item>
          <el-form-item label="" prop="ismaster" class="mb-0">
            <group-number
              v-model="queryParams.groupnumber"
              style="display: block; width: 120px"
            />
          </el-form-item>
        </el-form>
      </div>
      <el-table
        v-loading="loading"
        :data="tableList"
        class="commtable w_full"
        max-height="460"
      >
        <el-table-column
          label=""
          prop="radio"
          width="60px"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.checked"></el-checkbox>
            <!-- <el-radio v-model="scope.row.radio" label=""></el-radio> -->
          </template>
        </el-table-column>
        <el-table-column label="群成员（3）" prop="userName">
          <template slot-scope="scope">
            <div class="flexbetween">
              <div class="flex aligncenter kh_box">
                <img
                  src="//qyb-1253970052.cos.ap-shanghai.myqcloud.com/public/wechatdata/avatar/5424982/e9564f7860994fe258a93da3a18c1a2c.png"
                  alt=""
                  class="useravatar"
                />
                <div class="khnamebox pl-12">
                  <div class="title c_222333" style="line-height: normal">
                    {{ scope.row.title || "肖成红--" }}
                    <span class="c_text3">(1)</span>
                  </div>
                </div>
              </div>
              <div class="grouptag c_primary f-12 textcenter">群主</div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        class="centerpagination paginaiton_noborder flexcenter"
        v-show="total > 0"
        :total="total"
        small
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        layout="prev, pager, next, jumper"
        @pagination="getList"
      />
    </div>
    <div class="g_left br-l">
      <div class="gl_header flexbetween plr-16">
        <span class="fw-6 c_text2"
          >已选择 <span class="c_text3 fw-0">(2/2)</span>
        </span>
        <span class="c_primary commhover">清空</span>
      </div>
      <div class="r_content p-12">
        <div class="rr_item flexbetween">
          <div class="title textover">小结</div>
          <div>
            <svg-icon icon-class="ijianfa" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import WeChat from "@/views/components/WeChat";
import GroupNumber from "@/components/GroupNumber";
import MultipleSelect from "@/components/MultipleSelect";
export default {
  data() {
    return {
      loading: false,
      options: [
        {
          value: 1,
          label: "小红",
          WeChatNum: 2,
          WeChatName: "智行",
        },
        {
          value: 2,
          label: "小军",
          WeChatNum: 1,
          WeChatName: "锐行",
        },
      ],
      queryParams1: {},
      queryParams: {},
      tableList: [{ id: 1, title: "城市群" }],
      total: 1,
      lableOpt: [
        { value: 1, label: "客户等级", children: ["一般", "重要", "核心"] },
        { value: 2, label: "客户等级2", children: ["一般2", "重要2", "核心2"] },
      ],
    };
  },
  components: {
    WeChat,
    GroupNumber,
    MultipleSelect,
  },
  methods: {
    getValue(obj) {
      console.log("获取行", obj);
    },

    getList() {},

    handleQuery() {},
  },
};
</script>
<style lang="scss" scoped>
.g_left {
  width: 240px;
  border-right: 1px solid #e9e9e9;
}
.g_right {
  flex: 1 0;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
}
.gl_header {
  height: 48px;
  background-color: #fafafa;
  border-bottom: 1px solid #e9e9e9;
}
.el-form {
  ::v-deep .el-form-item__label {
    padding-bottom: 5px;
  }
  .el-form-item {
    margin-bottom: 10px;
  }
}
.useravatar {
  width: 32px;
  height: 32px;
}
.centerpagination {
  ::v-deep .el-pagination {
    position: inherit;
  }
}
.br-l {
  border-left: 1px solid #e9e9e9;
}
.grouptag {
  display: inline-block;
  padding: 0 5px;
  height: 20px;
  line-height: 20px;
  background: #eff2fe;
  border-radius: 2px;
  border: 1px solid #d5ddfb;
}
.r_content {
  height: 422px;
  overflow: hidden;
  overflow-y: auto;
}
.rr_item {
  height: 40px;
  .title {
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.listbody {
  height: calc(100% - 48px);
  overflow: hidden;
  overflow-y: auto;
}
.list-item {
  height: 44px;
  padding: 0 8px;
  background-color: #eff3ff;
  .avatar {
    width: 28px;
    height: 28px;
  }
  .list-title {
    max-width: calc(100% - 30px);
  }
}
.footerbox {
  border-top: 1px solid #e9e9e9;
  padding: 10px 16px;
}
.mselectheader{
    padding: 12px 16px;
    border-bottom: 1px solid #e9e9e9;
}
</style>